<template>
	<view>
		<view style="background: #fff;">
			<view class="banner">
				<image :src="bindImage||'/static/images/WechatIMG1449.jpg'" mode=""></image>
			</view>
			<view v-if="groupList.length==0" style="text-align: center;padding: 20rpx 0;color: #999;">暂无关联分组联赛数据</view>
			<view style="border: 1rpx solid #eee;padding: 20rpx;border-radius: 16rpx;text-align: center;">
				<view style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 20rpx;">
					<view>
						<view>总得分</view>
						<view>{{bindData.score||0}}</view>
					</view>
					<view>
						<view>总助攻</view>
						<view>{{bindData.assists}}</view>
					</view>
					<view>
						<view>总抢断</view>
						<view>{{bindData.steal}}</view>
					</view>
					<view>
						<view>总盖帽</view>
						<view>{{bindData.block}}</view>
					</view>
					<view>
						<view>总篮板</view>
						<view>{{bindData.backboard}}</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-around;">
					<view>
						<view>总观看量</view>
						<view>{{bindData.viewNum||0}}</view>
					</view>
					<view>
						<view>总参赛人数</view>
						<view>{{bindData.playerNum}}</view>
					</view>
					<view>
						<view>总参赛球队</view>
						<view>{{bindData.teamNum}}</view>
					</view>
				</view>
			</view>
			<view class="tabs-container">
				<scroll-view class="tabs-scroll-view" scroll-x="true" show-scrollbar="true">
					<view class="tab-item"
						style="position: fixed;left: -20rpx;top: 590rpx;background: #fff;width: 60rpx;z-index: 999;"
						v-html="'⬅️'">
					</view>
					<view class="tab-item" v-for="(item, index) in groupList" :key="index"
						:class="{ active: currentTabIndex === index }" @click="switchTab(index, item)">
						{{ item.groupName }}
						<view class="tab-line" v-if="currentTabIndex === index"></view>
					</view>
					<view class="tab-item" style="position: fixed;right: -40rpx;top: 590rpx;background: #fff;"
						v-html="'➡️'">
					</view>
				</scroll-view>
			</view>
			<view class="contest-list">
				<view class="contest-item" v-for="(contest, idx) in contestList" :key="idx"
					@click="goDetail(contest.id, contest)">
					<image v-if="contest.contestLogo" :src="imageUrl + contest.contestLogo">
					</image>
					<image v-else
						src='https://boyubasketball.oss-cn-shanghai.aliyuncs.com/17515209013431583935612-compressed-IMG_6958.JPG'>
					</image>
					<view class="contest-name">{{contest.contestName}}</view>
					<view class="arrow-right">></view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import config from '@/config'
	import {
		getLeagueH5ContestList,
		getcontestBindingList,
		getContestBindingGroupList,
		getContestListByBindingGroupId,
		getsignature,
		contestBindingAll
	} from '@/api/tournament/index.js'
	import {
		wexinShare
	} from "@/common/js/utils.js";
	export default {
		data() {
			return {
				list: [],
				imageUrl: '',
				pageDate: {
					pageSize: 10,
					pageNum: 1
				},
				total: 0,
				loadingType: '',
				pageType: '',
				groupList: [],
				currentTabIndex: 0,
				contestList: [],
				bindImage: '',
				bindGroupName: '',
				contestId: '',
				bindData: {}
			}
		},
		onLoad(options) {
			console.log('options11', options)
			if (options && options.contestId) {
				this.contestId = options.contestId;
				// uni.setStorageSync('bindId', options.contestId);
			}
			this.imageUrl = config.imageUrl
			this.getContestGroupList(this.contestId) // 获取分组列表
			this.pageType = 'bind'
			console.log('locationlocationlocation', window.location);
		},
		async onReachBottom() {
			if (this.pageType == 'bind') return
			// 如果是绑定列表进来的 不需要分页 return掉后面操作
			if (this.list.length == this.total) {
				this.loadingType = 'no-more'
				return;
			}
			this.loadingType = 'loading'
			this.pageDate.pageNum += 1
			this.getList()
		},
		onShareAppMessage() {
			return {
				// title: this.bindGroupName + 'hah哈2',
				title: 'hah哈2',
				path: location.href,
				imageUrl: 'koihi',
			};
		},
		methods: {
			getBindData(groupId) {
				contestBindingAll({
					groupId
				}).then(res => {
					this.bindData = res.data
				})
			},
			share() {
				const isIOS = function() {
					var isIphone = navigator.userAgent.includes('iPhone')
					var isIpad = navigator.userAgent.includes('iPad')
					return isIphone || isIpad
				}
				if (!window.entryUrl) {
					window.entryUrl = encodeURIComponent(location.href.split('#')[0])
				}
				// let currentUrl = location.href //获取当前页面链接
				//获取url链接（如果有#需要这么获取）
				var currentUrl = encodeURIComponent(window.location.href.split('#')[0])
				// var currentUrl = isIOS() ? window.entryUrl : encodeURIComponent(window.location.href.split('#')[0])
				//获取url链接（如果没有#需要这么获取）
				// var currentUrl = encodeURIComponent(window.location.href);
				console.log('currentUrl', currentUrl);
				getsignature({
					url: currentUrl
				}).then((res) => {
					console.log('res数据', res);
					if (res.code == 200) {
						//获取的微信加签
						let obj = {
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							signature: res.data.signature,
							timestamp: res.data.timestamp,
						};
						const title = this.bindGroupName
						//分享的内容
						let shareData = {
							title: title,
							desc: title,
							link: location.href,
							imgUrl: this.bindImage,
						};
						const metaImage = document.createElement('meta');
						metaImage.setAttribute('property', 'og:image');
						// metaImage.setAttribute('content', this.imageUrl + this.imgUrl);
						metaImage.setAttribute('content', this.bindImage);
						document.head.appendChild(metaImage);

						const metaTitle = document.createElement('meta');
						metaTitle.setAttribute('property', 'og:title');
						metaTitle.setAttribute('content', title);
						document.head.appendChild(metaTitle);

						const metaDescription = document.createElement('meta');
						metaDescription.setAttribute('property', 'og:description');
						metaDescription.setAttribute('content', title);
						document.head.appendChild(metaDescription);
						console.log('shareDatashareData', shareData)
						console.log('documentdocument', document)
						//调用封装好的方法，传入微信加签和内容
						wexinShare(obj, shareData);
					} else {
						uni.showToast({
							title: "获取sdk参数失败!",
							icon: "none",
						});
					}
				});
			},
			getContestGroupList(bindId) {
				getContestBindingGroupList({
					id: bindId
				}).then(res => {
					console.log('res', res)
					this.groupList = res.data
					// 如果有分组数据，默认选择第一个并加载其比赛列表
					if (this.groupList && this.groupList.length > 0) {
						this.bindImage = this.groupList[0].groupLogo
						this.bindGroupName = this.groupList[0].groupName
						this.currentTabIndex = 0;
						this.getContestListByGroupId(this.groupList[0].id);
						this.getBindData(this.groupList[0].id);
					}
					this.$nextTick(() => {
						var ua = window.navigator.userAgent.toLowerCase();
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							// 微信中打开
							uni.showLoading({
								title: "数据加载中..."
							})
							this.share();
						} else {
							// 普通浏览器中打开
						}
					})
				}).catch(err => {
					console.error('获取分组列表失败', err);
				})
			},
			getBindList(id) {
				getcontestBindingList({
					id
				}).then(res => {
					this.list.push(...res.rows)
				})
			},
			//获取数据
			getList() {
				getLeagueH5ContestList(this.pageDate).then(res => {
					this.total = res.total
					this.list.push(...res.rows)
					if (this.list.length == this.total) {
						this.loadingType = 'no-more'
						return;
					}
				})
			},
			//联赛详情
			goDetail(id, item) {
				uni.setStorageSync('scoringWay', item.scoringWay)
				uni.navigateTo({
					url: '/pages/index?id=' + id + '&name=' + item.contestName + '&img=' + (item.contestLogo ? item
						.contestLogo : '')
				})
			},
			switchTab(index, item) {
				this.bindImage = item.groupLogo
				this.bindGroupName = item.groupName
				this.currentTabIndex = index;
				this.contestList = []; // 清空之前的比赛列表
				this.getContestListByGroupId(item.id); // 根据分组ID获取比赛列表
				this.getBindData(item.id)
			},
			getContestListByGroupId(groupId) {
				getContestListByBindingGroupId({
					id: groupId
				}).then(res => {
					if (res.code === 200) {
						this.contestList = res.data || [];
					}
				}).catch(err => {
					console.error('获取分组比赛列表失败', err);
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #efefef;
		height: 100%;
	}

	.banner {
		width: 100%;
		height: 372rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		width: 100%;
		margin: auto;
		padding: 40rpx;
		text-align: center;
		background-color: #fff;
		font-size: 32rpx;
		font-weight: 700;
	}

	.list {
		padding: 8rpx;
		width: 100%;
		background: #fff;
		text-align: center;

		image {
			width: 500rpx;
			height: 160rpx;
			border-radius: 10rpx;
			background-position: 50%;
			background-size: 100% 100%;
		}
	}

	.tabs-container {
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}

	.tabs-scroll-view {
		white-space: nowrap;
		padding: 10rpx 20rpx 0;
	}

	.tab-item {
		display: inline-block;
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		font-size: 32rpx;
		color: #333;
		position: relative;
		transition: all 0.3s ease;

		&.active {
			color: #ff6633;
			font-weight: bold;
		}
	}

	.tab-line {
		position: absolute;
		bottom: -5rpx;
		left: 20%;
		width: 60%;
		height: 6rpx;
		background-color: #ff6633;
		border-radius: 3rpx;
	}

	.contest-list {
		display: flex;
		flex-direction: column;
		padding: 0;
		background-color: #fff;
	}

	.contest-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.contest-item image {
		width: 240rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.contest-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.contest-name {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: left;
		width: 400rpx;
	}

	.contest-meta {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.contest-type {
		color: #666;
	}

	.contest-views {
		font-size: 24rpx;
		color: #999;
	}

	.arrow-right {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #999;
		font-size: 32rpx;
	}
</style>